<template>
	<!-- 用户中心 -->
	<div id="Ucenter">
		<van-nav-bar fixed placeholder >
			<template slot="title">我的</template>
		</van-nav-bar>
		<!-- 用户头像信息展示区 -->
		<div class="userAvatar">
			<img v-if="!token" src="/images/avatar/user/default.png">
			<img v-else :src="userMap.avatar" >
			<div class="userBox" @click="goPage">
				<div class="uname" v-if="!token">登录/注册</div>
				<div class="uname" v-else>{{userMap.uname}}</div>
				<div class="phoneBox">
					<img class="phoneIcon" src="@/assets/icon/phone.png">
					<div v-if="token" class="text">{{userMap.phone}}</div>
					<div v-else class="text">暂无绑定的手机号</div>
				</div>
			</div>
			<img @click="goPage" class="iconRight" src="@/assets/icon/right-arrow.png">
		</div>
		<!-- 信息 -->
		<div class="userInfo">
			<van-grid :column-num="3">
				<van-grid-item>
					<div class="num">
						<span class="text orange" v-if="Object.keys(userMap).length">{{(userMap.money).toFixed(2)}}</span>
						<span class="text orange" v-else>0.00</span>
						<span class="desc">元</span>
					</div>
					<div class="fz-9">我的余额</div>
				</van-grid-item>
				<van-grid-item>
					<div class="num">
						<span class="text danger">{{token? userMap.yhqCount : 0}}</span>
						<span class="desc">个</span>
					</div>
					<div class="fz-9">我的优惠</div>
				</van-grid-item>
				<van-grid-item>
					<div class="num">
						<span class="text green">{{token? userMap.jfScore : 0}}</span>
						<span class="desc">分</span>
					</div>
					<div class="fz-9">我的积分</div>					
				</van-grid-item>
			</van-grid>
		</div>
		<!-- 菜单选项 -->
		<van-cell v-for="(itemObj,i) in navList" :to="itemObj.Url" :key="i" :title="itemObj.title" :icon="itemObj.icon" :is-link="itemObj.isLink" />
	</div>
</template>

<script>
import { mapState } from 'vuex'
	export default {
		data() {
			return {
				navList:[
					{title:"修改密码",icon:"setting-o",Url:"/updatePwd",isLink:true},
					{title:"天气预报",icon:"peer-pay",Url:"/Weather",isLink:true},
					{title:"收货地址",icon:"logistics",Url:"/address",isLink:true},
					{title:"充值入口",icon:"gold-coin-o",Url:"/addMoney",isLink:true},
				]
			}
		},
		methods:{
			async initUserInfo(){
				await this.$store.dispatch("LoaduserInfo")
			},
			goPage(){
				if(this.token){
					// 跳转到个人中心
					this.$router.push("/userDetails")
				}else {
					this.$router.push("/ULogin")
				}
			}
		},
		mounted(){
			if(this.token){
				this.initUserInfo()
			}
		},
		computed:{
			...mapState(["userMap","token"])
		}
	}
</script>

<style lang="scss" scoped>
@import "../../scss/GLOBAL.scss";
#Ucenter {
	user-select: none;
	::v-deep {
		.van-nav-bar {
			background-color: $themeColor;
			.van-nav-bar__title {
				color: #fff;
			}
		}
		.van-grid-item__content {
				padding: 16px 5px;
			}
	}
	.userAvatar {
		display: flex;
		position: relative;
		align-items: center;
		background-color: $themeColor;
		padding: 15px 10px;
		color: #fff;
		img {
			width: 4.38em;
		}
		.userBox {
			padding-left:10px;
			.uname {
				padding-bottom: 5px;
			}
			.phoneBox {
				display: flex;
				align-content: center;
				.phoneIcon {
					width: 1.56em;
				}
				.text {
					display: flex;
					align-items: center;
				}
			}
		
		}
		.iconRight {
			position: absolute;
			right: 10px;
			width: 25px;
		}
	}
	.userInfo {
		.num {
			display: flex;
			align-items: flex-end;
			.text { //数字数量
				font-weight: bold;
				padding-right: 3px;
				font-size: 1.6em;
				&.danger {
					color: #f36749;
				}
				&.orange {
					color: #f39b18;
				}
				&.green {
					color: #6fbf17;
				}
			}
			.desc {
				padding-bottom: 2px;
			}
		}
		.fz-9 {
			padding-top: 3px;
			font-size: .9em;
		}
	}
}
</style>